<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.66">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <link rel="icon" href="https://cdn.pixabay.com/animation/2022/08/05/07/12/07-12-14-597_512.gif"><title>TypeScript | PERSIST</title><meta name="description" content="三剑客、Vue、React、...">
    <link rel="preload" href="/blogs/assets/style-3126903c.css" as="style"><link rel="stylesheet" href="/blogs/assets/style-3126903c.css">
    <link rel="modulepreload" href="/blogs/assets/app-5598dde8.js"><link rel="modulepreload" href="/blogs/assets/TypeScript.html-f51a5af3.js"><link rel="modulepreload" href="/blogs/assets/TypeScript.html-8e165f09.js"><link rel="prefetch" href="/blogs/assets/index.html-d9b814f4.js" as="script"><link rel="prefetch" href="/blogs/assets/css.html-38c59cab.js" as="script"><link rel="prefetch" href="/blogs/assets/css3.html-28b2b602.js" as="script"><link rel="prefetch" href="/blogs/assets/html.html-fda41b1c.js" as="script"><link rel="prefetch" href="/blogs/assets/html5.html-b423fb46.js" as="script"><link rel="prefetch" href="/blogs/assets/JavaScript.html-ea762ff0.js" as="script"><link rel="prefetch" href="/blogs/assets/base.html-84d926c4.js" as="script"><link rel="prefetch" href="/blogs/assets/bigscreen.html-5524caa6.js" as="script"><link rel="prefetch" href="/blogs/assets/react.html-8bfc6f05.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-02246930.js" as="script"><link rel="prefetch" href="/blogs/assets/vue.html-241f215e.js" as="script"><link rel="prefetch" href="/blogs/assets/handbook.html-6cbaa868.js" as="script"><link rel="prefetch" href="/blogs/assets/React.html-418e631e.js" as="script"><link rel="prefetch" href="/blogs/assets/ReactRouter.html-7e5f06ff.js" as="script"><link rel="prefetch" href="/blogs/assets/Redux.html-5560e17c.js" as="script"><link rel="prefetch" href="/blogs/assets/StudyTutorial.html-b823f3d9.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-f94e0631.js" as="script"><link rel="prefetch" href="/blogs/assets/Pinia.html-387c093b.js" as="script"><link rel="prefetch" href="/blogs/assets/Vue3.html-16d06532.js" as="script"><link rel="prefetch" href="/blogs/assets/VueApi.html-bb8b9635.js" as="script"><link rel="prefetch" href="/blogs/assets/VueRouter.html-ae38cb38.js" as="script"><link rel="prefetch" href="/blogs/assets/Vuex4.html-7a289a91.js" as="script"><link rel="prefetch" href="/blogs/assets/vue_notes.html-cbe8ffc8.js" as="script"><link rel="prefetch" href="/blogs/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/blogs/assets/index.html-443e75e2.js" as="script"><link rel="prefetch" href="/blogs/assets/css.html-ab74bca3.js" as="script"><link rel="prefetch" href="/blogs/assets/css3.html-77914954.js" as="script"><link rel="prefetch" href="/blogs/assets/html.html-841090be.js" as="script"><link rel="prefetch" href="/blogs/assets/html5.html-4d4eaa91.js" as="script"><link rel="prefetch" href="/blogs/assets/JavaScript.html-099c0d25.js" as="script"><link rel="prefetch" href="/blogs/assets/base.html-15ef8c21.js" as="script"><link rel="prefetch" href="/blogs/assets/bigscreen.html-0d51dc7f.js" as="script"><link rel="prefetch" href="/blogs/assets/react.html-eb1112c8.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-3457663e.js" as="script"><link rel="prefetch" href="/blogs/assets/vue.html-3059cfc3.js" as="script"><link rel="prefetch" href="/blogs/assets/handbook.html-cd96bfb6.js" as="script"><link rel="prefetch" href="/blogs/assets/React.html-659a8167.js" as="script"><link rel="prefetch" href="/blogs/assets/ReactRouter.html-dc674066.js" as="script"><link rel="prefetch" href="/blogs/assets/Redux.html-9f749333.js" as="script"><link rel="prefetch" href="/blogs/assets/StudyTutorial.html-f43ec5ce.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-9ec54961.js" as="script"><link rel="prefetch" href="/blogs/assets/Pinia.html-1dcc52b7.js" as="script"><link rel="prefetch" href="/blogs/assets/Vue3.html-48a9f634.js" as="script"><link rel="prefetch" href="/blogs/assets/VueApi.html-684b02dc.js" as="script"><link rel="prefetch" href="/blogs/assets/VueRouter.html-6184995c.js" as="script"><link rel="prefetch" href="/blogs/assets/Vuex4.html-1fce3133.js" as="script"><link rel="prefetch" href="/blogs/assets/vue_notes.html-096e3b77.js" as="script"><link rel="prefetch" href="/blogs/assets/404.html-8fc28dc8.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/blogs/" class=""><img class="logo" src="https://cdn.pixabay.com/animation/2022/08/05/07/12/07-12-14-597_512.gif" alt="PERSIST"><span class="site-name can-hide">PERSIST</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>html</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/html.html" class="" aria-label="HTML"><!--[--><!--]--> HTML <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/html5.html" class="" aria-label="HTML 5"><!--[--><!--]--> HTML 5 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>css</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/css.html" class="" aria-label="CSS"><!--[--><!--]--> CSS <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/css3.html" class="" aria-label="CSS 3"><!--[--><!--]--> CSS 3 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>JavaScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/JavaScript.html" class="" aria-label="JavaScript"><!--[--><!--]--> JavaScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>TypeScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a aria-current="page" href="/blogs/base/TypeScript.html" class="router-link-active router-link-exact-active router-link-active" aria-label="TypeScript"><!--[--><!--]--> TypeScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Vue"><span class="title">Vue</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Vue"><span class="title">Vue</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vue3.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueApi.html" class="" aria-label="Vue API"><!--[--><!--]--> Vue API <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueRouter.html" class="" aria-label="Vue Router"><!--[--><!--]--> Vue Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vuex4.html" class="" aria-label="Vuex"><!--[--><!--]--> Vuex <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Pinia.html" class="" aria-label="Pinia"><!--[--><!--]--> Pinia <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="React"><span class="title">React</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="React"><span class="title">React</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/React.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/ReactRouter.html" class="" aria-label="React Router"><!--[--><!--]--> React Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/Redux.html" class="" aria-label="Redux"><!--[--><!--]--> Redux <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>三剑客</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/base.html" class="" aria-label="三剑客"><!--[--><!--]--> 三剑客 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/vue.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>uni-app</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/uniapp/uniapp.html" class="" aria-label="uni-app 教程"><!--[--><!--]--> uni-app 教程 <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/case/uniapp.html" class="" aria-label="uni-app"><!--[--><!--]--> uni-app <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/react.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>大屏</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/bigscreen.html" class="" aria-label="大屏"><!--[--><!--]--> 大屏 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><a href="/blogs/StudyTutorial/StudyTutorial.md" class="" aria-label="学习教程"><!--[--><!--]--> 学习教程 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/blogs/handbook/handbook.md" class="" aria-label="前端手册"><!--[--><!--]--> 前端手册 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/fayuanpersist/blogs" rel="noopener noreferrer" target="_blank" aria-label="Gitee"><!--[--><!--]--> Gitee <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>html</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/html.html" class="" aria-label="HTML"><!--[--><!--]--> HTML <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/html5.html" class="" aria-label="HTML 5"><!--[--><!--]--> HTML 5 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>css</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/css.html" class="" aria-label="CSS"><!--[--><!--]--> CSS <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/css3.html" class="" aria-label="CSS 3"><!--[--><!--]--> CSS 3 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>JavaScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/JavaScript.html" class="" aria-label="JavaScript"><!--[--><!--]--> JavaScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>TypeScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a aria-current="page" href="/blogs/base/TypeScript.html" class="router-link-active router-link-exact-active router-link-active" aria-label="TypeScript"><!--[--><!--]--> TypeScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Vue"><span class="title">Vue</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Vue"><span class="title">Vue</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vue3.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueApi.html" class="" aria-label="Vue API"><!--[--><!--]--> Vue API <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueRouter.html" class="" aria-label="Vue Router"><!--[--><!--]--> Vue Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vuex4.html" class="" aria-label="Vuex"><!--[--><!--]--> Vuex <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Pinia.html" class="" aria-label="Pinia"><!--[--><!--]--> Pinia <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="React"><span class="title">React</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="React"><span class="title">React</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/React.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/ReactRouter.html" class="" aria-label="React Router"><!--[--><!--]--> React Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/Redux.html" class="" aria-label="Redux"><!--[--><!--]--> Redux <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>三剑客</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/base.html" class="" aria-label="三剑客"><!--[--><!--]--> 三剑客 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/vue.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>uni-app</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/uniapp/uniapp.html" class="" aria-label="uni-app 教程"><!--[--><!--]--> uni-app 教程 <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/case/uniapp.html" class="" aria-label="uni-app"><!--[--><!--]--> uni-app <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/react.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>大屏</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/bigscreen.html" class="" aria-label="大屏"><!--[--><!--]--> 大屏 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><a href="/blogs/StudyTutorial/StudyTutorial.md" class="" aria-label="学习教程"><!--[--><!--]--> 学习教程 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/blogs/handbook/handbook.md" class="" aria-label="前端手册"><!--[--><!--]--> 前端手册 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/fayuanpersist/blogs" rel="noopener noreferrer" target="_blank" aria-label="Gitee"><!--[--><!--]--> Gitee <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">html <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/base/html.html" class="sidebar-item" aria-label="HTML"><!--[--><!--]--> HTML <!--[--><!--]--></a><!----></li><li><a href="/blogs/base/html5.html" class="sidebar-item" aria-label="HTML 5"><!--[--><!--]--> HTML 5 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">css <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/base/css.html" class="sidebar-item" aria-label="CSS"><!--[--><!--]--> CSS <!--[--><!--]--></a><!----></li><li><a href="/blogs/base/css3.html" class="sidebar-item" aria-label="CSS 3"><!--[--><!--]--> CSS 3 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">JavaScript <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/base/JavaScript.html" class="sidebar-item" aria-label="JavaScript"><!--[--><!--]--> JavaScript <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active collapsible">TypeScript <span class="down arrow"></span></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/blogs/base/TypeScript.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="TypeScript"><!--[--><!--]--> TypeScript <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/blogs/base/TypeScript.html#快速上手" class="router-link-active router-link-exact-active sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#ts-node" class="router-link-active router-link-exact-active sidebar-item" aria-label="ts-node"><!--[--><!--]--> ts-node <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#基础类型" class="router-link-active router-link-exact-active sidebar-item" aria-label="基础类型"><!--[--><!--]--> 基础类型 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#类型的组合" class="router-link-active router-link-exact-active sidebar-item" aria-label="类型的组合"><!--[--><!--]--> 类型的组合 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#变量声明" class="router-link-active router-link-exact-active sidebar-item" aria-label="变量声明"><!--[--><!--]--> 变量声明 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#接口" class="router-link-active router-link-exact-active sidebar-item" aria-label="接口"><!--[--><!--]--> 接口 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#类" class="router-link-active router-link-exact-active sidebar-item" aria-label="类"><!--[--><!--]--> 类 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#函数" class="router-link-active router-link-exact-active sidebar-item" aria-label="函数"><!--[--><!--]--> 函数 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#泛型-any-t" class="router-link-active router-link-exact-active sidebar-item" aria-label="泛型 any / T"><!--[--><!--]--> 泛型 any / T <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#枚举" class="router-link-active router-link-exact-active sidebar-item" aria-label="枚举"><!--[--><!--]--> 枚举 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#类型推论" class="router-link-active router-link-exact-active sidebar-item" aria-label="类型推论"><!--[--><!--]--> 类型推论 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#类型兼容性" class="router-link-active router-link-exact-active sidebar-item" aria-label="类型兼容性"><!--[--><!--]--> 类型兼容性 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#高级类型" class="router-link-active router-link-exact-active sidebar-item" aria-label="高级类型"><!--[--><!--]--> 高级类型 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#symbols" class="router-link-active router-link-exact-active sidebar-item" aria-label="Symbols"><!--[--><!--]--> Symbols <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#迭代器和生成器" class="router-link-active router-link-exact-active sidebar-item" aria-label="迭代器和生成器"><!--[--><!--]--> 迭代器和生成器 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#模块" class="router-link-active router-link-exact-active sidebar-item" aria-label="模块"><!--[--><!--]--> 模块 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#命名空间" class="router-link-active router-link-exact-active sidebar-item" aria-label="命名空间"><!--[--><!--]--> 命名空间 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#命名空间和模块" class="router-link-active router-link-exact-active sidebar-item" aria-label="命名空间和模块"><!--[--><!--]--> 命名空间和模块 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#模块解析" class="router-link-active router-link-exact-active sidebar-item" aria-label="模块解析"><!--[--><!--]--> 模块解析 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#声明合并" class="router-link-active router-link-exact-active sidebar-item" aria-label="声明合并"><!--[--><!--]--> 声明合并 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/TypeScript.html#jsx" class="router-link-active router-link-exact-active sidebar-item" aria-label="JSX"><!--[--><!--]--> JSX <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="typescript" tabindex="-1"><a class="header-anchor" href="#typescript" aria-hidden="true">#</a> TypeScript</h1><blockquote><p>TypeScript 是 JavaScript 类型的超集，它可以编译成纯 JavaScript。<br> TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。</p></blockquote><p><a href="https://www.tslang.cn/index.html" target="_blank" rel="noopener noreferrer">TypeScript - 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a><br><a href="https://www.runoob.com/typescript/ts-tutorial.html" target="_blank" rel="noopener noreferrer">菜鸟教程 - TypeScript - 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a><br><a href="https://www.w3cschool.cn/typescript/typescript-tutorial.html" target="_blank" rel="noopener noreferrer">w3cschool - TypeScript - 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><ul><li><p>TypeScript 是由微软开发的自由和开源的编程语言。</p></li><li><p>TypeScript 是 JavaScript 的一个超集，从今天数以百万计的 JavaScript 开发者所熟悉的语法和语义开始。可以使用现有的 JavaScript 代码，包括流行的 JavaScript 库，并从 JavaScript 代码中调用 TypeScript 代码。</p></li><li><p>TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的 JavaScript 引擎中。</p></li><li><p>TypeScript 的优势在于：它有更多的规则和类型限制，代码具有更高的预测性、可控性，易于维护和调试；对模块、命名空间和面向对象的支持，更容易组织代码开发大型复杂程序。</p></li><li><p>另外，TypeScript 的编译步骤可以捕获运行之前的错误。</p></li></ul><h2 id="快速上手" tabindex="-1"><a class="header-anchor" href="#快速上手" aria-hidden="true">#</a> 快速上手</h2><details class="custom-container details"><summary>快速上手 <span class="badge tip" style=""><!--[-->TypeScript<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 全局安装</span>
npm install <span class="token operator">-</span>g typescript
<span class="token comment">// 局部安装    即项目中安装 开发依赖</span>
npm install typescript <span class="token operator">--</span>save<span class="token operator">-</span>dev
npm i typescript <span class="token operator">-</span><span class="token constant">D</span>

<span class="token comment">// 查看版本</span>
tsc <span class="token operator">-</span>v 

<span class="token comment">// 编译   即将 ts文件 转化为 js文件</span>
tsc index<span class="token punctuation">.</span>ts
<span class="token comment">// 编译结果 index.ts =&gt; index.js</span>

<span class="token comment">//生成 tsconfig.json 配置文件</span>
tsc <span class="token operator">--</span>init
</code></pre><div class="highlight-lines"><br><div class="highlight-line"> </div><br><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="ts-node" tabindex="-1"><a class="header-anchor" href="#ts-node" aria-hidden="true">#</a> ts-node</h2><blockquote><p>直接在node环境中运行ts文件</p></blockquote><details class="custom-container details"><summary>ts-node <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>demo</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// index.ts</span>
<span class="token keyword">let</span> str<span class="token operator">:</span> String <span class="token operator">=</span> <span class="token string">&quot;hello&quot;</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 执行 tsc index.ts 转化为  index.js</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">&quot;hello&quot;</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 执行index.js</span>
node index<span class="token punctuation">.</span>js
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>操作比较麻烦，需要先将ts转成js，再执行。可以借助一个工具插件，直接在node环境中运行ts文件: <code>ts-node</code></p></blockquote><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>// 安装
<span class="token function">npm</span> <span class="token function">install</span> ts-node <span class="token parameter variable">-g</span>

// 运行
ts-node index.ts 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="基础类型" tabindex="-1"><a class="header-anchor" href="#基础类型" aria-hidden="true">#</a> 基础类型</h2><details class="custom-container details"><summary>基础类型 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token number">1.</span>布尔值<span class="token operator">:</span>    <span class="token boolean">true</span><span class="token operator">/</span><span class="token boolean">false</span>
<span class="token keyword">let</span> isShow<span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>



<span class="token number">2.</span>数字<span class="token operator">:</span>    十进制<span class="token operator">/</span>二进制<span class="token operator">...</span>
<span class="token keyword">let</span> price<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> hexLiteral<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token number">0xf00d</span><span class="token punctuation">;</span>



<span class="token number">3.</span>字符串<span class="token operator">:</span>    <span class="token function">定界符</span><span class="token punctuation">(</span>单引号<span class="token operator">:</span><span class="token string">&#39;&#39;</span> <span class="token operator">/</span> 双引号<span class="token operator">:</span><span class="token string">&quot;&quot;</span> <span class="token operator">/</span> 反引号<span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token keyword">let</span> name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">=</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> age<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> sentence<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">你好, 我是 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> name <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, 今年 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> age <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 岁.</span><span class="token template-punctuation string">`</span></span>



<span class="token number">4.</span>数组<span class="token operator">:</span>    两种方式
方式<span class="token number">1</span><span class="token operator">:</span> 直接在元素类型后面接上 <span class="token punctuation">[</span><span class="token punctuation">]</span>
eg<span class="token operator">:</span> <span class="token keyword">let</span> list<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

方式<span class="token number">2</span><span class="token operator">:</span> 数组泛型，<span class="token builtin">Array</span><span class="token operator">&lt;</span>元素类型<span class="token operator">&gt;</span>
eg<span class="token operator">:</span> <span class="token keyword">let</span> list<span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">number</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>



<span class="token number">4.</span>元组 Tuple<span class="token operator">:</span>    表示一个已知元素数量和类型的数组
<span class="token keyword">let</span> x <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token builtin">string</span> <span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
x <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&#39;张三&#39;</span> <span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// ✅</span>
x <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">18</span> <span class="token punctuation">,</span> <span class="token string">&#39;张三&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// ❌</span>



<span class="token number">5.</span>枚举<span class="token operator">:</span>    <span class="token keyword">enum</span>类型是对JavaScript标准数据类型的一个补充
<span class="token keyword">enum</span> Color <span class="token punctuation">{</span>Red<span class="token punctuation">,</span> Green<span class="token punctuation">,</span> Blue<span class="token punctuation">}</span>
<span class="token keyword">let</span> c<span class="token operator">:</span> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span>Blue <span class="token comment">// 执行结果 2</span>

<span class="token keyword">enum</span> Color <span class="token punctuation">{</span>Red <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> Green<span class="token punctuation">,</span> Blue<span class="token punctuation">}</span>
<span class="token keyword">let</span> c<span class="token operator">:</span> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span>Blue<span class="token punctuation">;</span> <span class="token comment">// 执行结果 3</span>

<span class="token keyword">enum</span> Color <span class="token punctuation">{</span>Red <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> Green <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">,</span> Blue<span class="token punctuation">}</span>
<span class="token keyword">let</span> c<span class="token operator">:</span> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span>Blue<span class="token punctuation">;</span> <span class="token comment">// 执行结果 9</span>

<span class="token keyword">enum</span> Color <span class="token punctuation">{</span>Red <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> Green <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">,</span> Blue <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">}</span>
<span class="token keyword">let</span> c<span class="token operator">:</span> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span>Blue<span class="token punctuation">;</span> <span class="token comment">// 执行结果 10</span>

<span class="token keyword">enum</span> Color <span class="token punctuation">{</span> Red <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> Green<span class="token punctuation">,</span> Blue <span class="token punctuation">}</span>
<span class="token keyword">let</span> c<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">=</span> Color<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token comment">// 执行结果 Blue</span>



<span class="token number">6</span><span class="token punctuation">.</span>Any<span class="token operator">:</span>    任意类型
<span class="token keyword">let</span> name<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token string">&#39;张三&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> age<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> addr<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&#39;遵义&#39;</span> <span class="token punctuation">,</span> <span class="token string">&#39;北京&#39;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> obj<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">&#39;张三&#39;</span> <span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">}</span>



<span class="token number">7</span><span class="token punctuation">.</span>Void<span class="token operator">:</span>    没有任何类型 函数使用的最多
<span class="token keyword">function</span> <span class="token function">getList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;当一个函数没有返回值时，你通常会见到其返回值类型是 void：&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

声明一个<span class="token keyword">void</span>类型的变量没有什么大用，因为你只能为它赋予<span class="token keyword">undefined</span>和<span class="token keyword">null</span>：
<span class="token keyword">let</span> unusable<span class="token operator">:</span> <span class="token keyword">void</span> <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>



<span class="token number">8</span><span class="token punctuation">.</span>Null 和 Undefined    默认情况下 <span class="token keyword">null</span>和<span class="token keyword">undefined</span> 是所有类型的子类型。
<span class="token keyword">let</span> u<span class="token operator">:</span> <span class="token keyword">undefined</span> <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> n<span class="token operator">:</span> <span class="token keyword">null</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>



<span class="token number">9</span><span class="token punctuation">.</span>Never<span class="token operator">:</span>    <span class="token builtin">never</span>类型 表示的是 那些 永不存在的值 的类型
<span class="token comment">// 返回never的函数必须存在无法达到的终点</span>
<span class="token keyword">function</span> <span class="token function">infiniteLoop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">never</span> <span class="token punctuation">{</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>



<span class="token number">10</span><span class="token punctuation">.</span>Object<span class="token operator">:</span>
<span class="token comment">// object表示非原始类型，</span>
<span class="token comment">// 即除number，string，boolean，symbol，null或undefined之外的类型。</span>
<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">create</span><span class="token punctuation">(</span>o<span class="token operator">:</span> object <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token comment">// declare 关键字</span>

<span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> prop<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ✅</span>
<span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ✅</span>

<span class="token function">create</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ❌</span>
<span class="token function">create</span><span class="token punctuation">(</span><span class="token string">&quot;string&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ❌</span>
<span class="token function">create</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ❌</span>
<span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ❌</span>



<span class="token number">11.</span>类型断言<span class="token operator">:</span>    类型断言有两种形式
方式一<span class="token operator">:</span> <span class="token string">&quot;尖括号&quot;</span> 语法<span class="token operator">:</span>
<span class="token keyword">let</span> someValue<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token string">&quot;this is a string&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> strLength<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span>someValue<span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>

方式二<span class="token operator">:</span> <span class="token keyword">as</span> 语法<span class="token operator">:</span>
<span class="token keyword">let</span> someValue<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token string">&quot;this is a string&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> strLength<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token punctuation">(</span>someValue <span class="token keyword">as</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>

注意点<span class="token operator">:</span>
<span class="token number">1.</span>两种形式是等价的。
<span class="token number">2.</span>至于使用哪个大多数情况下是凭个人喜好；
<span class="token number">3.</span>然而，当你在TypeScript里使用<span class="token constant">JSX</span>时，只有 <span class="token keyword">as</span>语法断言是被允许的。
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="类型的组合" tabindex="-1"><a class="header-anchor" href="#类型的组合" aria-hidden="true">#</a> 类型的组合</h2><blockquote><p>变量 由多个类型组合而成;</p><p>使用 <strong>&quot;|&quot;</strong> 分隔</p></blockquote><details class="custom-container details"><summary>类型的组合 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// age 变量可以是 number类型 也可以是 string类型</span>
<span class="token keyword">let</span> age<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span> <span class="token operator">=</span> <span class="token string">&quot;18&quot;</span><span class="token punctuation">;</span> 

<span class="token comment">// list变量 数组   里面可以是 number类型  也可以是 string类型</span>
<span class="token comment">// (number | string)  注意点:   括号必须要有</span>
eg<span class="token operator">:</span> <span class="token keyword">let</span> list<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="变量声明" tabindex="-1"><a class="header-anchor" href="#变量声明" aria-hidden="true">#</a> 变量声明</h2><p>var let const<br> let 和 const 是 JavaScript 里相对较新的变量声明方式。<br> const 是对 let 的一个增强，它能阻止对一个变量再次赋值。</p><p><a href="https://www.tslang.cn/docs/handbook/variable-declarations.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="接口" tabindex="-1"><a class="header-anchor" href="#接口" aria-hidden="true">#</a> 接口</h2><p>TypeScript 的核心原则之一是对值所具有的结构进行类型检查。<br> 它有时被称做“鸭式辨型法”或“结构性子类型化”。<br> 在 TypeScript 里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。</p><details class="custom-container details"><summary>接口 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1. 接口 interface:</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code>
<span class="token keyword">interface</span> <span class="token class-name">configInfo</span> <span class="token punctuation">{</span>
    <span class="token comment">// 必须 传入的属性</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
    status<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    <span class="token comment">// 在前面加 readonly 即 只读属性</span>
    <span class="token comment">// 只读属性(一些对象属性只能在对象刚刚创建的时候修改其值)</span>
    <span class="token comment">// 即 赋值后, x和y再也不能被改变了</span>
    <span class="token keyword">readonly</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
    <span class="token keyword">readonly</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
    <span class="token comment">// 函数</span>
    <span class="token function">getList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token keyword">void</span><span class="token punctuation">;</span>

    <span class="token comment">// 索引签名</span>
    <span class="token punctuation">[</span>propName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>


    <span class="token comment">// 可选属性 ?:</span>
    addr<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 继承接口:</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">Shape</span> <span class="token punctuation">{</span>
    color<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">PenStroke</span> <span class="token punctuation">{</span>
    penWidth<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">Square</span> <span class="token keyword">extends</span> <span class="token class-name">Shape</span><span class="token punctuation">,</span> PenStroke <span class="token punctuation">{</span>
    sideLength<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> square <span class="token operator">=</span> <span class="token operator">&lt;</span>Square<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
square<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">&quot;blue&quot;</span><span class="token punctuation">;</span>
square<span class="token punctuation">.</span>sideLength <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
square<span class="token punctuation">.</span>penWidth <span class="token operator">=</span> <span class="token number">5.0</span><span class="token punctuation">;</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="类" tabindex="-1"><a class="header-anchor" href="#类" aria-hidden="true">#</a> 类</h2><p><a href="https://www.tslang.cn/docs/handbook/classes.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><details class="custom-container details"><summary>类 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1. 类: class 关键字</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">class</span> <span class="token class-name">Greeter</span> <span class="token punctuation">{</span>
    greeting<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>message<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>greeting <span class="token operator">=</span> message<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">greet</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token string">&quot;Hello, &quot;</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>greeting<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> greeter <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Greeter</span><span class="token punctuation">(</span><span class="token string">&quot;world&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 继承: extends 关键字</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
    <span class="token function">move</span><span class="token punctuation">(</span>distanceInMeters<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Animal moved </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>distanceInMeters<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">m.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
    <span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;Woof! Woof!&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> dog <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
dog<span class="token punctuation">.</span><span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
dog<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
dog<span class="token punctuation">.</span><span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

总结<span class="token operator">:</span>
这个例子展示了最基本的继承：类从基类中继承了属性和方法。
这里， Dog是一个 派生类，它派生自 Animal 基类，通过 <span class="token keyword">extends</span>关键字。
派生类通常被称作 子类，基类通常被称作 超类。
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3. 公共，私有与受保护的修饰符</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token number">3.1</span> 默认为 <span class="token keyword">public</span>
<span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
    <span class="token keyword">public</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    <span class="token keyword">public</span> <span class="token function">constructor</span><span class="token punctuation">(</span>theName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> theName<span class="token punctuation">;</span> <span class="token punctuation">}</span>
    <span class="token keyword">public</span> <span class="token function">move</span><span class="token punctuation">(</span>distanceInMeters<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> moved </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>distanceInMeters<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">m.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>



<span class="token number">3.2</span> 理解 <span class="token keyword">private</span>
<span class="token comment">// 当成员被标记成 private时，它就不能在声明它的类的外部访问。</span>
<span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
    <span class="token keyword">private</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>theName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> theName<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">new</span> <span class="token class-name">Animal</span><span class="token punctuation">(</span><span class="token string">&quot;Cat&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token comment">// 错误: &#39;name&#39; 是私有的.</span>



<span class="token number">3.3</span> 理解 <span class="token keyword">protected</span>
<span class="token comment">// protected修饰符与 private修饰符的行为很相似，</span>
<span class="token comment">// 但有一点不同， protected成员在派生类中仍然可以访问。</span>
<span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
    <span class="token keyword">protected</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Employee</span> <span class="token keyword">extends</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
    <span class="token keyword">private</span> department<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>

    <span class="token function">constructor</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> department<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>department <span class="token operator">=</span> department<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token function">getElevatorPitch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello, my name is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> and I work in </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>department<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> howard <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Employee</span><span class="token punctuation">(</span><span class="token string">&quot;Howard&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Sales&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>howard<span class="token punctuation">.</span><span class="token function">getElevatorPitch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>howard<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 错误</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>4. 把类当做接口使用</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">class</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span>
    x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
    y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">Point3d</span> <span class="token keyword">extends</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span>
    z<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> point3d<span class="token operator">:</span> Point3d <span class="token operator">=</span> <span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> z<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="函数" tabindex="-1"><a class="header-anchor" href="#函数" aria-hidden="true">#</a> 函数</h2><p>函数是JavaScript应用程序的基础。<br> 它帮助你实现抽象层，模拟类，信息隐藏和模块。<br> 在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义 行为的地方。<br> TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。</p><details class="custom-container details"><summary>函数 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1. 函数: 普通函数(声明式函数) / 匿名函数( 赋值式函数)</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 普通函数(声明式函数)</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 匿名函数( 赋值式函数)</span>
<span class="token keyword">let</span> <span class="token function-variable function">myAdd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 函数类型</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token number">2.1</span> 为函数定义类型

<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> <span class="token function-variable function">myAdd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>



<span class="token number">2.2</span> 书写完整函数类型
<span class="token keyword">let</span> <span class="token function-variable function">myAdd</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function-variable function">number</span> <span class="token operator">=</span>
    <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> <span class="token function-variable function">myAdd</span><span class="token operator">:</span> <span class="token punctuation">(</span>baseValue<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> increment<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function-variable function">number</span> <span class="token operator">=</span>
    <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>



<span class="token number">2.3</span> 推断类型

由 <span class="token number">2.1</span> 到 <span class="token number">2.2</span>  这种类型推断叫做<span class="token operator">:</span> <span class="token string">&quot;按上下文归类&quot;</span>  代码如下<span class="token operator">:</span>
<span class="token comment">// myAdd has the full function type</span>
<span class="token class-name"><span class="token keyword">let</span></span> <span class="token function-variable function">myAdd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// The parameters `x` and `y` have the type number</span>
<span class="token keyword">let</span> <span class="token function-variable function">myAdd</span><span class="token operator">:</span> <span class="token punctuation">(</span>baseValue<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> increment<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function-variable function">number</span> <span class="token operator">=</span>
    <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3. 可选参数和默认参数</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">buildName</span><span class="token punctuation">(</span>firstName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> lastName<span class="token operator">=</span><span class="token string">&#39;zuolin&#39;</span> <span class="token punctuation">,</span> age<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// firstName 必填参数</span>
    <span class="token comment">// lastName 有默认值</span>
    <span class="token comment">// age 可选参数</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>age<span class="token punctuation">)</span>
        <span class="token keyword">return</span> firstName <span class="token operator">+</span> <span class="token string">&quot; &quot;</span> <span class="token operator">+</span> lastName <span class="token operator">+</span> <span class="token string">&quot;&quot;</span> <span class="token operator">+</span> age<span class="token punctuation">;</span>
    <span class="token keyword">else</span>
        <span class="token keyword">return</span> firstName <span class="token operator">+</span> <span class="token string">&quot; &quot;</span> <span class="token operator">+</span> lastName<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

总结<span class="token operator">:</span>
<span class="token number">1.</span> 可选参数 必须 跟在必须参数 后面。 <span class="token operator">:</span><span class="token operator">?</span>
<span class="token number">2.</span> 有默认 初始化值 的参数。 
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>4. 剩余参数 使用 ...</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。</span>

<span class="token comment">// 实现 不确定参数个数</span>
<span class="token keyword">function</span> <span class="token function">buildName</span><span class="token punctuation">(</span>firstName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token operator">...</span>restOfName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> firstName <span class="token operator">+</span> <span class="token string">&quot; &quot;</span> <span class="token operator">+</span> restOfName<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot; &quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> employeeName <span class="token operator">=</span> <span class="token function">buildName</span><span class="token punctuation">(</span><span class="token string">&quot;Joseph&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Samuel&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Lucas&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;MacKinzie&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code></code></pre><div class="line-numbers" aria-hidden="true"></div></div></details><h2 id="泛型-any-t" tabindex="-1"><a class="header-anchor" href="#泛型-any-t" aria-hidden="true">#</a> 泛型 any / T</h2><details class="custom-container details"><summary>泛型 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">identity</span><span class="token punctuation">(</span>arg<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> arg<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

使用<span class="token builtin">any</span>类型会导致这个函数可以接收任何类型的arg参数，
这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。

因此，我们需要一种方法使返回值的类型与传入参数的类型是相同的。 
这里，我们使用了 <span class="token operator">**</span>类型变量<span class="token operator">**</span>，它是一种特殊的变量，只用于表示类型而不是值。

<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">identity</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>arg<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> arg<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="枚举" tabindex="-1"><a class="header-anchor" href="#枚举" aria-hidden="true">#</a> 枚举</h2><p>使用枚举我们可以定义一些带名字的常量。<br> 使用枚举可以清晰地表达意图或创建一组有区别的用例。<br> TypeScript支持<strong>数字</strong>的和基于<strong>字符串</strong>的枚举。</p><details class="custom-container details"><summary>枚举 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1. 数字枚举</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// Up初始化为 1,下面的成员会从 1 自增</span>
<span class="token keyword">enum</span> Direction <span class="token punctuation">{</span>
    Up <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> 
    Down<span class="token punctuation">,</span>  <span class="token comment">// 2</span>
    Left<span class="token punctuation">,</span>  <span class="token comment">// 3</span>
    Right  <span class="token comment">// 4</span>
<span class="token punctuation">}</span>


<span class="token comment">// Up没有初始化  则默认为 0</span>
<span class="token keyword">enum</span> Direction <span class="token punctuation">{</span>
    Up<span class="token punctuation">,</span> <span class="token comment">// 0 </span>
    Down<span class="token punctuation">,</span>  <span class="token comment">// 1</span>
    Left<span class="token punctuation">,</span>  <span class="token comment">// 2</span>
    Right  <span class="token comment">// 3</span>
<span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 字符串枚举</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code>在一个字符串枚举里，
每个成员都必须用字符串字面量，
或另外一个字符串枚举成员进行初始化。
<span class="token keyword">enum</span> Direction <span class="token punctuation">{</span>
    Up <span class="token operator">=</span> <span class="token string">&quot;UP&quot;</span><span class="token punctuation">,</span>
    Down <span class="token operator">=</span> <span class="token string">&quot;DOWN&quot;</span><span class="token punctuation">,</span>
    Left <span class="token operator">=</span> <span class="token string">&quot;LEFT&quot;</span><span class="token punctuation">,</span>
    Right <span class="token operator">=</span> <span class="token string">&quot;RIGHT&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3. 计算的和常量成员</strong><br> 每个枚举成员都带有一个值，它可以是 常量或 计算出来的。<br> 当满足如下条件时，枚举成员被当作是常量：</p><ul><li>它是枚举的第一个成员且没有初始化器，这种情况下它被赋予值 0：</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// E.X  is  constant:</span>
<span class="token keyword">enum</span> <span class="token constant">E</span> <span class="token punctuation">{</span> <span class="token constant">X</span> <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>它不带有初始化器且它之前的枚举成员是一个 数字常量。<br> 这种情况下，当前枚举成员的值为它上一个枚举成员的值加1。</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// All enum members in &#39;E1&#39; and &#39;E2&#39; are constant.</span>

<span class="token keyword">enum</span> <span class="token constant">E1</span> <span class="token punctuation">{</span> <span class="token constant">X</span><span class="token punctuation">,</span> <span class="token constant">Y</span><span class="token punctuation">,</span> <span class="token constant">Z</span> <span class="token punctuation">}</span>

<span class="token keyword">enum</span> <span class="token constant">E2</span> <span class="token punctuation">{</span>
    <span class="token constant">A</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token constant">B</span><span class="token punctuation">,</span> <span class="token constant">C</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><p>枚举成员使用 常量枚举表达式初始化。<br> 常数枚举表达式是TypeScript表达式的子集，它可以在编译阶段求值。<br> 当一个表达式满足下面条件之一时，它就是一个常量枚举表达式：</p><ul><li>一个枚举表达式字面量（主要是字符串字面量或数字字面量）</li><li>一个对之前定义的常量枚举成员的引用（可以是在不同的枚举类型中定义的）</li><li>带括号的常量枚举表达式</li><li>一元运算符 +, -, ~其中之一应用在了常量枚举表达式</li><li>常量枚举表达式做为二元运算符 +, -, *, /, %, &lt;&lt;, &gt;&gt;, &gt;&gt;&gt;, &amp;, |, ^的操作对象。<br> 若常数枚举表达式求值后为 NaN或 Infinity，则会在编译阶段报错。</li></ul></li></ul><p>所有其它情况的枚举成员被当作是需要计算得出的值。</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">enum</span> FileAccess <span class="token punctuation">{</span>
    <span class="token comment">// constant members</span>
    None<span class="token punctuation">,</span>
    Read    <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">&lt;&lt;</span> <span class="token number">1</span><span class="token punctuation">,</span>
    Write   <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">&lt;&lt;</span> <span class="token number">2</span><span class="token punctuation">,</span>
    ReadWrite  <span class="token operator">=</span> Read <span class="token operator">|</span> Write<span class="token punctuation">,</span>
    <span class="token comment">// computed member</span>
    <span class="token constant">G</span> <span class="token operator">=</span> <span class="token string">&quot;123&quot;</span><span class="token punctuation">.</span>length
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="类型推论" tabindex="-1"><a class="header-anchor" href="#类型推论" aria-hidden="true">#</a> 类型推论</h2><p><a href="https://www.tslang.cn/docs/handbook/type-inference.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="类型兼容性" tabindex="-1"><a class="header-anchor" href="#类型兼容性" aria-hidden="true">#</a> 类型兼容性</h2><p>TypeScript里的类型兼容性是基于结构子类型的。<br> 结构类型是一种只使用其成员来描述类型的方式。<br> 它正好与名义（nominal）类型形成对比。<br> (译者注：在基于名义类型的类型系统中，数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。这与结构性类型系统不同，它是基于类型的组成结构，且不要求明确地声明。)</p><p><a href="https://www.tslang.cn/docs/handbook/type-compatibility.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="高级类型" tabindex="-1"><a class="header-anchor" href="#高级类型" aria-hidden="true">#</a> 高级类型</h2><p><a href="https://www.tslang.cn/docs/handbook/advanced-types.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="symbols" tabindex="-1"><a class="header-anchor" href="#symbols" aria-hidden="true">#</a> Symbols</h2><p>自ECMAScript 2015起，symbol成为了一种新的原生类型，就像number和string一样。</p><details class="custom-container details"><summary>Symbols <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><ul><li>symbol类型的值是通过Symbol构造函数创建的。</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">let</span> sym1 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> sym2 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">&quot;key&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 可选的字符串key</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>Symbols是不可改变且唯一的。</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">let</span> sym2 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">&quot;key&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> sym3 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">&quot;key&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

sym2 <span class="token operator">===</span> sym3<span class="token punctuation">;</span> <span class="token comment">// false, symbols是唯一的</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>像字符串一样，symbols也可以被用做对象属性的键。</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">let</span> sym <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token punctuation">[</span>sym<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">&quot;value&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>sym<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;value&quot;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>Symbols也可以与计算出的属性名声明相结合来声明对象的属性和类成员。</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">const</span> getClassNameSymbol <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token punctuation">{</span>
    <span class="token punctuation">[</span>getClassNameSymbol<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">return</span> <span class="token string">&quot;C&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token constant">C</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> className <span class="token operator">=</span> c<span class="token punctuation">[</span>getClassNameSymbol<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;C&quot;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="/blogs/assets/Symbols-c4896a82.png" alt="Symbols"></p></details><h2 id="迭代器和生成器" tabindex="-1"><a class="header-anchor" href="#迭代器和生成器" aria-hidden="true">#</a> 迭代器和生成器</h2><p><a href="https://www.tslang.cn/docs/handbook/iterators-and-generators.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="模块" tabindex="-1"><a class="header-anchor" href="#模块" aria-hidden="true">#</a> 模块</h2><details class="custom-container details"><summary>模块 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>Commonjs 规范</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">//导出一个模块</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">//引入一个模块</span>
<span class="token keyword">const</span> moduleName <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">&quot;xxx&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>es module 规范</strong></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 导出 一个模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 引入一个模块</span>
<span class="token keyword">import</span> moduleName <span class="token keyword">from</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="命名空间" tabindex="-1"><a class="header-anchor" href="#命名空间" aria-hidden="true">#</a> 命名空间</h2><p><a href="https://www.tslang.cn/docs/handbook/namespaces.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="命名空间和模块" tabindex="-1"><a class="header-anchor" href="#命名空间和模块" aria-hidden="true">#</a> 命名空间和模块</h2><p><a href="https://www.tslang.cn/docs/handbook/namespaces-and-modules.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="模块解析" tabindex="-1"><a class="header-anchor" href="#模块解析" aria-hidden="true">#</a> 模块解析</h2><p><a href="https://www.tslang.cn/docs/handbook/module-resolution.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="声明合并" tabindex="-1"><a class="header-anchor" href="#声明合并" aria-hidden="true">#</a> 声明合并</h2><p><a href="https://www.tslang.cn/docs/handbook/declaration-merging.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="jsx" tabindex="-1"><a class="header-anchor" href="#jsx" aria-hidden="true">#</a> JSX</h2><p>JSX是一种嵌入式的类似XML的语法。<br> 它可以被转换成合法的JavaScript，尽管转换的语义是依据不同的实现而定的。<br> JSX因React框架而流行，但也存在其它的实现。<br> TypeScript支持内嵌，类型检查以及将JSX直接编译为JavaScript。</p><p><a href="https://www.tslang.cn/docs/handbook/jsx.html" target="_blank" rel="noopener noreferrer">参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">作者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: fayuanaini@dingtalk.com">fayuan</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/blogs/assets/app-5598dde8.js" defer></script>
  </body>
</html>
